The progressbar is the main piece.

Changing the text of the button, and making it disabled, is a good idea. Could look like this:

Noting here that the button is disabled, and disabled elements do not need to meet contrast requirements, and therefore it is intentionally very light. We can also darken that text to charcoal 5:

Thanks @jasmussen. Does this match your expectations of the result?

Yes it does. There may still be optimizations to do with regards to the next/previous lesson buttons and where they sit, perhaps they are reduced to just "Next" and "Previous", and are arrows instead of the bigger buttons. But we're getting into a detail territory that isn't necessarily a blocker for this particular PR.

Changing the text of the button, and making it disabled, is a good idea.
Noting here that the button is disabled, and disabled elements do not need to meet contrast requirements, and therefore it is intentionally very light.

I disagree with this. Part of the original feedback in the a11y issue was that "the second button is an interactive control that is not disabled, but does not do anything. This is confusing for all users. It should just be text, and not be an interactive element."

It is not really a disabled button, it's meant to convey information to the user. There's a suggestion that we could add the "completed" label to the main lesson title, and I think that would be better - maybe something like this

Then we could remove the "Completed" faux-button from the end of the lesson, so it only has the next/previous buttons.

It is not really a disabled button, it's meant to convey information to the user. There's a suggestion that we could add the "completed" label to the main lesson title, and I think that would be better - maybe something like this

Yeah, actually this is what I had in mind originally, but I also feel that using a disabled button could be acceptable, maybe just treating it as a button-like div, as with that commit, the screen reader wouldn't read it as a button, it would just read the text "lesson completed." But it might be a bit confusing to sighted users and adding a label is definitely better.

maybe something like this

I'll try this first. However, I was originally thinking about adding a green label somewhere to make it more obvious, for example like adding an icon like you did and making the entire title green. Also, the "completed" status icon in the sidebar should probably be green as well, to make it more consistent with other places. This can be done post-launch, though.

However, I was originally thinking about adding a green label somewhere to make it more obvious, for example like adding an icon like you did and making the entire title green. Also, the "completed" status icon in the sidebar should probably be green as well, to make it more consistent with other places. This can be done post-launch, though.

This was definitely thrown together in dev tools for a suggestion. I think this can wait until post-launch so we can get some proper design input for it.

This was definitely thrown together in dev tools for a suggestion. I think this can wait until post-launch so we can get some proper design input for it.

Opened an issue for this.